import React from 'react';
import {Region} from '@/app/types/region';
import Link from 'next/link';

export default function Region(props: Region) {
    return (
        <tr>
            <td> className="w-10 border border-slate-300 text-center">{}</td>
            <td className='border border-slate-300'>{props.Name}</td>
            <td className='border border-slate-300 text-center'>{props.RegionType}</td>
            <td className='border border-slate-300 text-center'>{props.Latitude}, {props.Longitude}</td>
            <td className='w-52 border border-slate-300'>
                <span onClick={() => deleteRegion(props.ID)}
                      className='bg-red-500 p-2 inline-block text-white text-sm'>Delete</span>
                <Link href={`/region/edit/${props.ID}`}
                      className='bg-yellow-500 p-2 inline-block ml-3 text-white text-sm'>Edit</Link>
                <Link href={`/region/view/${props.ID}`}
                      className='bg-yellow-500 p-2 inline-block ml-3 text-white text-sm'>View</Link>
            </td>
        </tr>
    );
}

async function deleteRegion(regionId: number) {
    // Call the POST method to delete the region
    const response = await fetch('/region', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ID: regionId}),
    });
    // Handle the response
    if (response.ok) {
        console.log(`Region ${regionId} deleted successfully`);
    } else {
        console.error(`Error deleting region ${regionId}`);
    }
}